<template>
  <div>
  <el-container direction="vertical">
    <el-header  height="auto" style="text-align: center;background: url('/images/login_hd.jpg')  top center no-repeat;">
      <!-- Header content -->
      <el-image src="images/logo.png" fit="fill" lazy></el-image>
        <span class="login-title">南昌高新区招商引资档案管理系统</span>
    </el-header>
    
      <el-container direction="vertical">
        <el-main height="auto">
          <!-- Main content -->
          <div id="container">
            <div class="loginDiv">
              <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
              <el-form-item  label="用户名" prop='user'>
                <el-input placeholder="请输入用户名" v-model="form.user"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop='pwd'>
                <el-input placeholder="请输入密码" v-model="form.pwd" show-password></el-input>
              </el-form-item>
               <el-form-item class="checkboxgood">
                <el-checkbox v-model="form.checked">记住密码</el-checkbox>
              </el-form-item>
              <el-form-item>
                 <router-link to="/index"><el-button style="background-image: linear-gradient(#A20E0E,#CC1515);" class="loginbtn"  size="default" @click="check" >登录</el-button></router-link>
                 <el-button style="background-image: linear-gradient(#03446F,#0D66A1);"  size="default" @click="rem">重置</el-button>
                 
              </el-form-item>
            </el-form>
            

             
            </div>
            
          </div>
        </el-main>
        <el-footer height="auto">
          <!-- Footer content -->
        </el-footer>
      </el-container>
  
  </el-container>
  
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        user:'',
        pwd:'',
        checked:false
      }
    }
  },
  rules:{
    user:[{ required: true, message: "请输入用户名", trigger: "blur" }],
    pwd:[{ required: true, message: "请输入密码", trigger: "blur" }]
  },
  methods: {
   
    check(){ // localstorage记住密码
    localStorage.setItem('form',JSON.stringify(this.form))
    },
    rem(){
      this.form={};
      localStorage.setItem('form',JSON.stringify(this.form))
    }
  },
  created() {
    
    var form=JSON.parse(localStorage.getItem('form'))
    // console.log(form);
    if(form.checked){
      this.form.user=form.user;
      this.form.pwd=form.pwd;
      this.form.checked=form.checked;
    }else{
      form={}
    }
  },

};
</script>

<style>
.login-title {
    line-height: 90px;
    color: #d8edff;
    font-size: 32px;
    font-weight: bold;
    vertical-align:bottom;
    font-family: microsoft yahei;
    letter-spacing: 2px;
    /* margin-bottom: -30px; */
}
#container {
    width: 760px;
    height: 380px;
    background: url(/images/login_container.jpg) top center no-repeat;
    z-index:5;
    margin: 30px auto;
}
.loginDiv {
  width: 300px;
position: relative;
left: 45%;
top: 40%
}
.loginDiv  .el-form-item__label {
 
    color:white ;
    background-color: #11507C;
    padding: 0px ;
    text-align: center ;
  }
  .loginDiv .el-input__inner{
  border-radius: 0px ;
  background-color: #CAD8E8;
}
.loginDiv .el-form-item {
    margin-bottom: 11px;
}
.loginDiv .el-checkbox{
  color: white;
  float: right;
}
.loginDiv .el-form-item__content{
  line-height: 100%;
}
.checkboxgood{
  height: 20px;
}
.loginDiv .el-button {

  color: white;
  border: 0px;
  position: relative;
  left: -50px;
  width: 100px;
}
.loginbtn{
  margin-right: 20px !important;
}
</style>
